<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/compound.css" />
		<style type="text/css">
			#wrapper {
				width: 1207px;
				height: 700px;
				margin: 0px auto;
				background-color: white;
			}
			
			#wrapper a {
				text-decoration: none;
			}
			
			#wrapper input {
				outline: medium;
				border: 1px solid #CCCCCC;
			}
			
			#header {
				width: 1000px;
				/*height: 80px;*/
				margin: 0px auto;
				border-bottom: 3px solid #791A46;
			}
			
			#header img {
				height: 70px;
			}
			
			#content {
				width: 1000px;
				height: 460px;
				margin: 0px auto;
			}
			
			#content .img {
				border: 1px solid;
				width: 570px;
				height: 450px;
				float: left;
				margin-top: 20px;
			}
			
			#content .img img {
				width: 100%;
				height: 100%;
			}
			
			#form {
				width: 390px;
				height: 450px;
				border: 3px solid #791A46;
				float: left;
				position: relative;
				top: 10px;
				background-color: #F7F8F8;
			}
			
			#form form {
				width: 300px;
				height: 400px;
				position: absolute;
				top: 20px;
				left: 45px;
			}
			
			#form form input {
				width: 290px;
				height: 25px;
				margin-left: 3px;
				margin-top: 25px;
				border-radius: 5px;
				font-size: 12px;
			}
			
			#form .p1,
			#form .p2,
			#form .p3,
			#form .p4,
			#form .p5 {
				width: 290px;
				height: 20px;
				line-height: 20px;
				margin-left: 3px;
				margin-top: 2px;
				background-color: #FFEBEC;
				font-size: 12px;
				color: #FF8080;
				display: none;
				/*border: 1px solid;*/
			}
			
			#form .p1 {
				position: absolute;
				top: 70px;
			}
			
			#form .p2 {
				position: absolute;
				top: 121px;
			}
			
			#form .p3 {
				position: absolute;
				top: 173px;
			}
			
			#form .p4 {
				position: absolute;
				top: 225px;
			}
			
			#form .p5 {
				position: absolute;
				top: 277px;
			}
			
			#form .top {
				width: 300px;
				height: 20px;
				font-size: 16px;
				line-height: 20px;
				color: #595757;
			}
			
			#form .top p {
				font-size: 12px;
				position: absolute;
				top: 0px;
				left: 160px;
				color: #807E7E;
			}
			
			#form .top a {
				color: #8CB91E;
			}
			
			#form .top a:hover {
				text-decoration: underline;
			}
			
			#form .yzm {
				width: 300px;
				height: 60px;
				position: relative;
			}
			
			#form .yzm input {
				width: 150px;
				float: left;
			}
			
			#form .yzm p {
				font-size: 12px;
				float: left;
			}
			
			#form .yzm a {
				position: absolute;
				top: 5px;
				left: 215px;
				color: #AAAAAA;
			}
			
			#form .yzm a:hover {
				text-decoration: underline;
				color: #8CB91E;
			}
			
			#form .yzm img {
				width: 80px;
				height: 25px;
				position: absolute;
				top: 20px;
				left: 215px;
			}
			
			#form .agree {
				width: 300px;
				height: 50px;
			}
			
			#form .agree input {
				width: 15px;
				height: 15px;
				line-height: 30px;
			}
			
			#form .agree a {
				margin-top: -5px;
				margin-left: 5px;
				font-size: 12px;
				position: relative;
				top: -2px;
			}
			
			#form .zhuce {
				width: 300px;
				height: 60px;
			}
			
			#form .zhuce input {
				width: 210px;
				height: 30px;
				color: white;
				cursor: pointer;
				font-size: 16px;
				font-weight: bold;
				border-radius: 5px;
				margin-top: 10px;
				margin-left: 50px;
				background-image: url(img/myimg/login,register/login.png);
				background-position: 0px -6px;
			}
			
			#form .agree a {
				color: #807E7E;
			}
			
			#form .agree a:hover {
				text-decoration: underline;
				color: #8CB91E;
			}
			
			#footer-bottom {
				margin-top: 30px;
			}
		</style>
	</head>

	<body>
		<div id="wrapper" class="mt15">
			<div id="header" class="h80">
				<a href=""><img src="img/myimg/logo.png" /></a>
			</div>
			<div id="content">
				<div id="form" class="mt10">
					<form method="post">
						<div class="top">注册Vin酒庄
							<p>已有Vin酒庄账号？
								<a href="login.html" class="ml5">登录</a>
							</p>
						</div>
						<input type="email" id="youxiang" placeholder="邮箱/手机" />
						<p class="p1"></p>
						<input type="text" id="name" value="" placeholder="用户名" />
						<p class="p2"></p>
						<input type="password" id="pwd" value="" placeholder="密码" />
						<p class="p3"></p>
						<input type="password" id="apwd" value="" placeholder="确认密码" />
						<p class="p4"></p>
						<div class="yzm">
							<input type="text" id="" value="" />
							<p>
								<a href="">看不清 换一张</a><img src="img/myimg/login,register/validationCode.jpg" /></p>
						</div>
						<p class="p5"></p>
						<div class="agree ml20">
							<input type="checkbox" youxiang="" id="" />
							<a href="">我已阅读并同意《Vin酒庄服务条款》</a>
						</div>
						<div class="zhuce">
							<input type="button" id="tijiao" value="立即注册" />
						</div>
					</form>
				</div>
				<div class="img"><img src="img/myimg/login,register/e1fd03382d99791f8c1dcd53d552eb2c.jpg" /></div>
			</div>

			<!--尾部-->
			<div id="footer-bottom">
				<p class="footer-p">
					<span><a href="javascript:;">关于我们</a></span>
					<span>|</span>
					<span><a href="javascript:;">免费条款</a></span>
					<span>|</span>
					<span><a href="javascript:;">中粮集团</a></span>
					<span>|</span>
					<span><a href="javascript:;">友情链接</a></span>
					<span>|</span>
					<span><a href="javascript:;">搜索热词</a></span>
					<span>|</span>
					<span><a href="javascript:;">实物购物券</a></span>
					<span>|</span>
					<a href="javascript:;">客服电话：400-005-5678</a>
				</p>
				<p>
					<span><a href="javascript:;"><img src="img/beian.png"/>京公网安备 11010102000458号</a></span>
					<span>|</span>
					<span>京ICP备 13003995号</span>
					<span>|</span>
					<span>营业执照（统一社会信用代码）91110000055590239L</span>
					<span>|</span>
					<span>食品经营许可证：JY11105020028185</span>
					<span>|</span>
					<span>Copyright&copy;2009-2017 Vin酒庄上购物 版权所有</span>
				</p>
			</div>

		</div>
		<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var ok1 = false;                
				var ok2 = false;                
				var ok3 = false;                
				var ok4 = false;
				$("#youxiang").blur(function() {

					if($("#youxiang").val() == "") {
						$("#youxiang").css("border", "1px solid #FF8080");
						$(".p1").css("display", "block");
						$(".p1").html("邮箱或手机号不能为空");

						ok1 = false; 
						return;  
					}
					if($("#youxiang").val().indexOf("@") == -1) {
						$("#youxiang").css("border", "1px solid #FF8080");
						var reg2 = /^1[3|4|5|7|8][0-9]{9}$/;;
						if(!reg2.test($("#youxiang").val())) {
							$(".p1").css("display", "block");
							$(".p1").html("手机号格式不正确");

							ok1 = false;
							return;     
						}
					} else {
						$("#youxiang").css("border", "1px solid #FF8080");
						var reg1 = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
						if(!reg1.test($("#youxiang").val())) {
							$(".p1").css("display", "block");
							$(".p1").html("邮箱格式不正确");
							ok1 = false;
							return;     
						} 
					}
					$("#youxiang").css("border", "1px solid #8CB91E");
					$(".p1").css("display", "none");
					ok1 = true;
				});

				$("#name").blur(function() {
					if($("#name").val() == "") {
						$("#name").css("border", "1px solid #FF8080");
						$(".p2").css("display", "block");
						$(".p2").html("用户名不能为空");
						ok2 = false;  
						return; 
					}
					var reg3 = /^[a-zA-Z\d]\w{3,11}[a-zA-Z\d]$/;
					if(!reg3.test($("#name").val())) {
						$("#name").css("border", "1px solid #FF8080");
						$(".p2").css("display", "block");
						$(".p2").html("4-12位，必须含有大小字母和数字两种");
						ok2 = false; 
						return;
					}
					$("#name").css("border", "1px solid #8CB91E");
					$(".p2").css("display", "none");
					ok2 = true; 

				});
				$("#pwd").blur(function() {
					if($("#pwd").val() == "") {
						$("#pwd").css("border", "1px solid #FF8080");
						$(".p3").css("display", "block");
						$(".p3").html("密码不能为空");
						ok3 = false; 
						return;
					}
					var reg4 = /^[0-9 | A-Z | a-z]{6,16}$/;
					if(!reg4.test($("#pwd").val())) {
						$("#pwd").css("border", "1px solid #FF8080");
						$(".p3").css("display", "block");
						$(".p3").html("6-16位，可以是大小写字母和数字");
						ok3 = false; 
						return;
					}
					$("#pwd").css("border", "1px solid #8CB91E");
					$(".p3").css("display", "none");
					ok3 = true; 
				});
				$("#apwd").blur(function() {
					if($("#apwd").val() == "") {
						$("#apwd").css("border", "1px solid #FF8080");
						$(".p4").css("display", "block");
						$(".p4").html("确认密码不能为空");
						ok2 = false;  
						return; 
					}
					if($("#apwd").val() != $("#pwd").val()) {
						$("#apwd").css("border", "1px solid #FF8080");
						$(".p4").css("display", "block");
						$(".p4").html("再次输入的密码不一致，请重新输入");
						ok4 = false; 
						return;
					}
					$("#apwd").css("border", "1px solid #8CB91E");
					$(".p4").css("display", "none");
					ok4 = true; 
				}); 

				$("#tijiao").on("click", function() {
					if(ok1 && ok2 && ok3 && ok4) {   
						reg();
						//						$.ajax({
						//							type: "post",
						//							url: "https://leancloud.cn:443/1.1/users",
						//							data: '{"username":"' + name + '","password":"' + pwd + '","phone":"' + youxiang + '"}',
						//							contentType: "application/json",
						//							headers: {
						//								"X-LC-Id": "isetgclNbinuVRR2cWjIAsc2-gzGzoHsz",
						//								"X-LC-Key": "iB12WgD1FTr8FGQNB0JSsrah"
						//							},
						//							success: function(data) {
						//								location.href = "login.html";
						//								console.log("注册成功");
						//							},
						//							error: function(data) {
						//								console.log(data);
						//							}
						//						});                  
					} else { 
						return false;                    
					}                
				});
				window.onload = function() {
					var APP_ID = 'isetgclNbinuVRR2cWjIAsc2-gzGzoHsz';
					var APP_KEY = 'iB12WgD1FTr8FGQNB0JSsrah';
					AV.init({
						appId: APP_ID,
						appKey: APP_KEY
					});
				}

				function reg() {
					var youxiang = $("#youxiang").val();
					var name = $("#name").val();
					var pwd = $("#pwd").val();
					
					// 新建 AVUser 对象实例
					var user = new AV.User();
					// 设置用户名
					user.setUsername(name);
					// 设置密码
					user.setPassword(pwd);
					// 设置邮箱 
					user.setEmail(youxiang);
					user.signUp().then(function(loginedUser) {
						//注册成功
						//成功后登录
						console.log(loginedUser);
						AV.User.logIn(name, pwd).then(function(loginedUser) {
							console.log("注册成功")
							location.href = "login.html";
						}, function(error) {
							console.log(error)
						});

					}, function(error) {
						console.log(error)
					});

				}
			});
		</script>
	</body>

</html>